<template>
  <view :style="{paddingBottom: safeBottom + 'px'}">
    <!-- 顶部自定义导航 -->
    <TnNavbar fixed alpha customBack :placeholder="false" bg-color="transparent" :bottom-shadow="false">
      <view slot="back" class='tn-custom-nav-bar__back'>
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </TnNavbar>
    <view class="top-backgroup">
      <image src='https://resource.tuniaokj.com/images/index_bg/components_new.jpg' mode='widthFix'
             class='backgroud-image'></image>
    </view>
    <button @click="gotoDetail">
      <view class="dong">
        <view class="monster">
          <view class="monster__face">
            <view class="monster__eye avatar-eye avatar-eye--green eye--left">
              <view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span
                  class="avatar-eye-pupil-lightReflection"></span></span></view>
            </view>
            <view class="monster__eye avatar-eye avatar-eye--violet eye--right">
              <view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span
                  class="avatar-eye-pupil-lightReflection"></span></span></view>
            </view>
            <view class="monster__noses">
              <view class="monster__nose"></view>
              <view class="monster__nose"></view>
            </view>
            <view class="monster__mouth">
              <view class="monster__top"></view>
              <view class="monster__bottom"></view>
            </view>
          </view>
        </view>
      </view>
    </button>
    <view class="about__wrap">
      <view
          class="user-info__container tn-flex tn-flex-column justify-center items-center">
        <view class="user-info__avatar tn-grey-light_bg tn-flex tn-flex-col-center tn-flex-row-center">
          <view class="tn-shadow-blur" :style="{backgroundImage:`url(${current.head_img})`}"
                style="width: 280rpx;height: 280rpx;background-size: cover;">
          </view>
        </view>
        <view class="user-info__nick-name" style="position: relative">
          <image style="width: 50rpx; height: 50rpx" :src="filterRestrain(restrainList, current.type).icon"></image>
          <text class="tn-ml-xs">{{ current.def_name }}</text>
          <view @click.stop="changeCollect" style="position: absolute;top: -60rpx;right: -60rpx;z-index: 999">
            <TnIcon bold color="#E83A30" v-if="current.collect_flag" name="floral-fill" size="60"/>
            <TnIcon bold color="#E83A30" v-else name="floral" size="60"/>
          </view>
        </view>
        <view class="tn-flex tn-pt" v-if="current.kind">
          <view
              v-for="(v, index) in filterKind(current.kind)"
              class="tn-radius tn-text-sm"
              style="padding: 3px 5px"
              :class="[positionTagMl(index)]"
              :style="{backgroundColor: v.bgColor, color: v.textColor}"
          >
            {{ v.name }}
          </view>
        </view>
      </view>
      <!--  皮肤 -->
      <view class="tn-m-sm tn-radius" style="overflow: hidden" v-if="imageList.length > 0 && imageList[0].image !== 'undefined'">
        <view class="tn-p-sm tn-blue-light_bg tn-text-bold tn-flex justify-between align-center">
          <view class="flex align-end">
            皮肤
          </view>
          <view @click="previewImage">
            <text>预览</text>
            <TnIcon name="right"/>
          </view>
        </view>
        <!--        <view style="padding: 135px 0" class="border-left border-right">-->
        <!--          <skin-preview :imageList="imageList" />-->
        <!--        </view>-->
        <view class="tower-swiper border-left border-right" @touchmove="TowerMove" @touchstart="TowerStart"
              @touchend="TowerEnd">
          <view
              class="tower-item"
              :class="(imageList.length > 3 && item.zIndex === 1)?'none':''"
              v-for="(item,index) in imageList"
              :key="item.id"
              :style="[{
                '--index': item.zIndex,
                '--left':item.mLeft,
                'transform': imageList.length > 1 ? `scale(calc(0.5 + var(--index) / ${imageList.length > 5 ? imageList.length : 5
                }))` : ''
              }]"
              :data-direction="direction"
          >
            <view class="swiper-item" style="position:relative;">
              <view class="tn-flex items-center swiper-item-text">
                {{ item.name }}
              </view>
              <view class="tn-flex justify-between items-center swiper-item-type tn-blue-light_bg">
                {{ filterSkinType(item) }}
                <text v-if="item.type !== 1">ID:{{ item.id }}</text>
              </view>
              <image :src="item.image" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <view class="border-left border-bottom border-right tn-p-sm">
          {{ current.features }}
        </view>
      </view>
      <!-- 专属特性 -->
      <view class="tn-m-sm tn-radius" style="overflow: hidden" v-for="item in effectIconList" :key="item.id">
        <view class="tn-p-sm tn-blue-light_bg tn-text-bold">
          <view v-if="item.intensify" style="position:relative;width: 50rpx;height: 50rpx;">
            <image src="https://seerforwdw.info/seer-image/jingling-detail/2.png" style="width: 50rpx;height: 50rpx"></image>
            <text class="text-white" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">强</text>
          </view>
          <view v-else-if="item.is_adv && item.pet_id !== 3613 && item.pet_id !== 3941"
                style="position:relative;width: 50rpx;height: 50rpx;">
            <image src="https://seerforwdw.info/seer-image/jingling-detail/3.png"
                   style="width: 50rpx;height: 50rpx"></image>
            <text class="text-white" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">神</text>
          </view>
          <view v-else-if="item.is_adv && (item.pet_id === 3613 || item.pet_id === 3941)"
                style="position:relative;width: 50rpx;height: 50rpx;">
            <image src="https://seerforwdw.info/seer-image/jingling-detail/4.png"
                   style="width: 50rpx;height: 50rpx"></image>
            <text class="text-white" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">觉</text>
          </view>
          <view v-else style="position:relative;width: 50rpx;height: 50rpx;">
            <image src="https://seerforwdw.info/seer-image/jingling-detail/1.png" style="width: 50rpx;height: 50rpx"></image>
            <text class="text-white" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">专</text>
          </view>
        </view>
        <view class="tn-p-sm border-left border-bottom border-right" style="border-radius: 0 0 15rpx 15rpx">
          <text v-text="item.tips"></text>
        </view>
      </view>
      <!-- 种族值 -->
      <view class="tn-m-sm tn-radius" style="overflow: hidden;">
        <view class="tn-p-sm tn-blue-light_bg tn-text-bold">种族值</view>
        <view class="tn-flex justify-between border-left border-bottom border-right" style="border-radius: 0 0 15rpx 15rpx">
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">体力</view>
            <view class="tn-p-sm tn-text-center">{{ current.hp }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">攻击</view>
            <view class="tn-p-sm tn-text-center">{{ current.atk }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">防御</view>
            <view class="tn-p-sm tn-text-center">{{ current.def }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">特攻</view>
            <view class="tn-p-sm tn-text-center">{{ current.sp_atk }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">特防</view>
            <view class="tn-p-sm tn-text-center">{{ current.sp_def }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">速度</view>
            <view class="tn-p-sm tn-text-center">{{ current.spd }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">总和</view>
            <view class="tn-p-sm tn-text-center">
              {{ calcRace(current.hp, current.atk, current.def, current.sp_atk, current.sp_def, current.spd) }}
            </view>
          </view>
        </view>
      </view>
      <!-- 种族值 -->
      <view class="tn-m-sm tn-radius" style="overflow: hidden;" v-if="current.new_race">
        <view class="tn-p-sm tn-blue-light_bg tn-text-bold">神谕/强化/觉醒后种族值</view>
        <view class="tn-flex justify-between border-left border-bottom border-right" style="border-radius: 0 0 15rpx 15rpx">
          <view class="list-border-left" style="width: calc(100% / 7)" v-for="(item, index) in current.new_race">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">
              {{
                index === 0 ? '体力' : index === 1 ? '攻击' : index === 2 ? '防御' : index === 3 ? '特攻' : index === 4 ? '特防' : '速度'
              }}
            </view>
            <view class="tn-p-sm tn-text-center">{{ item }}</view>
          </view>
          <view class="list-border-left" style="width: calc(100% / 7)">
            <view class="tn-p-sm tn-text-center" style="border-bottom: 1px solid #eee;">总和</view>
            <view class="tn-p-sm tn-text-center">
              {{
                calcRace(current.new_race[0] * 1, current.new_race[1] * 1, current.new_race[2] * 1, current.new_race[3] * 1,
                    current.new_race[4] * 1, current.new_race[5] * 1)
              }}
            </view>
          </view>
        </view>
      </view>
      <!-- 克制情况 -->
      <view class="tn-m-sm tn-radius" style="overflow: hidden">
        <view class="tn-p-sm tn-blue-light_bg tn-text-bold tn-flex justify-between align-center">
          <view class="flex align-end">
            <image style="width: 50rpx; height: 50rpx" :src="filterRestrain(restrainList, current.type).icon"></image>
            <text>攻击/受击</text>
          </view>
          <view @click="gotoRestrain">
            <text>更多</text>
            <TnIcon name="right"/>
          </view>
        </view>
        <view class="tn-flex justify-between border-left border-bottom border-right"
              style="border-radius: 0 0 15rpx 15rpx">
          <view class="list-border-left" style="width: 15%">
            <view
                style="height: 150rpx;border-bottom: 1px solid #eee"
                class="flex justify-center align-center">
              攻击
            </view>
            <view
                style="height: 150rpx"
                class="flex justify-center align-center">
              受击
            </view>
          </view>
          <view class="list-border-left" style="width: 85%">
            <scroll-view scroll-x style="white-space: nowrap;border-bottom: 1px solid #eee">
              <view class="flex align-center" style="padding: 10rpx">
                <view v-for="(item, index) in seerInfo.restrain_info.real_restrain" :key="item.id"
                      class="flex justify-center margin-right-sm">
                  <view class="flex justify-center align-center flex-direction" style="background-color: #284267">
                    <view class="flex justify-center align-center" style="width: 90rpx; height: 90rpx">
                      <image :src="item.icon" style="width: 60rpx; height: 60rpx"></image>
                    </view>
                    <view
                        class="text-center bg-blue flex justify-center align-center"
                        style="width: 100rpx; height: 40rpx">
                      {{ item.num }}
                    </view>
                  </view>
                </view>
                <view v-if="seerInfo.restrain_info.real_restrain && seerInfo.restrain_info.real_restrain.length === 0"
                      class="flex justify-center align-center"
                      style="width: 100%; height: 130rpx">
                  普通属性不克制任何属性, 也不被任何属性克制
                </view>
              </view>
            </scroll-view>
            <scroll-view scroll-x style="white-space: nowrap;">
              <view class="flex align-center" style="padding: 10rpx">
                <view v-for="(item, index) in seerInfo.restrain_info.real_be_restrained" :key="item.id"
                      class="flex justify-center margin-right-sm">
                  <view class="flex justify-center align-center flex-direction" style="background-color: #284267">
                    <view class="padding-tb-xs">
                      <image :src="item.icon" style="width: 60rpx; height: 60rpx"></image>
                    </view>
                    <view
                        class="text-center bg-blue"
                        style="width: 100rpx">
                      {{ item.num }}
                    </view>
                  </view>
                </view>
                <view v-if="seerInfo.restrain_info.real_restrain && seerInfo.restrain_info.real_be_restrained.length === 0"
                      class="flex justify-center align-center"
                      style="width: 100%; height: 130rpx">
                  普通属性不克制任何属性, 也不被任何属性克制
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <!-- 技能组 -->
      <view class="tn-m-sm tn-radius" style="overflow: hidden" v-if="skills.length > 0">
        <view class="tn-p-sm tn-blue-light_bg tn-text-bold">技能组</view>
        <view style="border-radius: 0 0 15rpx 15rpx" class="border-bottom">
          <view v-for="(item, index) in skills"
                class="tn-pt-xs">
            <view class="flex align-center padding-tb-xs padding-lr-sm" style="background-color: #0a203e">
              <view style="border: 1px solid #11325e;" class="padding-xs flex align-center justify-center">
                <image :src="item.type_icon" style="width: 50rpx;height: 50rpx"></image>
              </view>
              <view class="padding-left">
                <view class="flex align-end">
                  <text class="text-lg margin-right-sm" style="color: #c3d6fd">{{ item.name }}</text>
                  <text :style="{color: item.category === 1 ? '#fe0000' : item.category === 2 ? '#f493f6' : '#99ff00'}">
                    {{ item.category_name }}
                  </text>
                </view>
                <view>
                  <text style="color: #fbfe4f">威力: {{ item.power }}</text>
                  <text style="color: #3ddbf4" class="margin-left-sm">PP: {{ item.max_pp }}</text>
                  <text style="color: #fff" class="margin-lr-sm">ID: {{ item.id }}</text>
                  <text style="color: #fff">命中率: {{ item.must_hit > 0 ? '必中' : item.accuracy }}</text>
                </view>
              </view>
            </view>
            <scroll-view scroll-y style="background-color: #14335e; height: 150px">
              <view class="padding-tb-sm padding-lr" style="color: #3fe1f9; ">
                <text v-text="item.skill_content"></text>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <loading-page :show="loading" @click.stop=""/>
  </view>
</template>

<script setup>
  import {onLoad, onShareAppMessage} from '@dcloudio/uni-app'
  import {getCurrentInstance, ref, watch} from 'vue';
  import TnNavbar from '../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue';
  import {calcRace, filterKind, filterRestrain, filterSkinType} from "../../utils/utils";
  import LoadingPage from "../../components/loadingPage.vue";
  import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'

  onShareAppMessage(() => {
    return {
      title: current.value.def_name,
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pages/jingling-detail/jingling-detail?data=' + JSON.stringify(current.value)
    }
  })

  const current = ref({})

  const loading = ref(false)

  const {
    proxy
  } = getCurrentInstance()

  const seerInfo = ref({
    id: 0,
    image: '',
    name: '',
    recommended_scheme: {},
    restrain_info: {
      restrain: {},
      real_restrain: [],
      be_restrained: {},
      real_be_restrained: []
    },
    skills: []
  })

  const restrainList = ref([])

  const safeBottom = proxy.safeAreaBottom

  onLoad(async res => {
    current.value = JSON.parse(res.data)
    if (current.value.new_race)
      current.value.new_race = current.value.new_race.split(' ')
    loading.value = true
    await getRestrainList()
    await getSkin()
    await getEffectIconList()
    await getSkillsList()
    loading.value = false
  })

  watch(() => restrainList.value, () => {
    const data = restrainList.value.filter(item => item.id === current.value.type)[0]
    seerInfo.value.restrain_info.restrain = JSON.parse(data.res || '{}')
    seerInfo.value.restrain_info.real_restrain = []
    for (let key in seerInfo.value.restrain_info.restrain) {
      const data = restrainList.value.filter(item => item.id === Number(key))[0]
      seerInfo.value.restrain_info.real_restrain.push({
        id: data.id,
        icon: data.icon,
        num: seerInfo.value.restrain_info.restrain[key]
      })
    }
    seerInfo.value.restrain_info.real_restrain =
        seerInfo.value.restrain_info.real_restrain.sort((a, b) => b.num - a.num).filter(item => item.num >= 1.5)
    seerInfo.value.restrain_info.be_restrained = JSON.parse(data.be_res || '{}')
    seerInfo.value.restrain_info.real_be_restrained = []
    for (let key in seerInfo.value.restrain_info.be_restrained) {
      const data = restrainList.value.filter(item => item.id === Number(key))[0]
      seerInfo.value.restrain_info.real_be_restrained.push({
        id: data.id,
        icon: data.icon,
        num: seerInfo.value.restrain_info.be_restrained[key]
      })
    }
    seerInfo.value.restrain_info.real_be_restrained =
        seerInfo.value.restrain_info.real_be_restrained.sort((a, b) => b.num - a.num).filter(item => item.num >= 1.5)
  })

  // 获取技能列表
  const skills = ref([])
  const getSkillsList = async () => {
    let extra_moves = JSON.parse(current.value.extra_moves || '{}')
    let learnable_moves = JSON.parse(current.value.learnable_moves || '{}')
    let sp_extra_moves = JSON.parse(current.value.sp_extra_moves || '{}')
    let move1 = learnable_moves['Move']
    let move2 = learnable_moves['AdvMove'] || []
    let move3 = extra_moves['Move']
    let move4 = sp_extra_moves['Move']
    let move5 = learnable_moves['SpMove'] || []
    let ids = [...move1, ...move2, ...move5, move3, move4].map(item => {
      if (item && item.ID) return item.ID
    })
    skills.value = await proxy.$api.getSkillsList({
      // ids: [23512]
      // ids: [16189]
      ids
    })
    // skills.value.forEach(item => {
    //   skillsDes(item.content, item.side_effect_arg)
    // })
    // if (current.value.map) {
    //   const data = await proxy.$api.getDetailData({
    //     url: current.value.map
    //   })
    //   seerInfo.value.id = data.id
    //   seerInfo.value.image = data.image
    //   seerInfo.value.name = data.name
    //   seerInfo.value.recommended_scheme = data.recommended_scheme
    //   seerInfo.value.skills = data.skills
    //   // skills.value = seerInfo.value.skills.sort((a, b) => b.id - a.id)
    // }
  }

  // 获取魂印列表
  const effectIconList = ref([])
  const getEffectIconList = async () => {
    effectIconList.value = await proxy.$api.getEffectIconList({
      pet_id: current.value.id
    })

    effectIconList.value.forEach(item => {
      item.tips = item.tips.replace(/\|/g, '\n')
    })
  }

  const imageList = ref([])

  const getRestrainList = async () => {
    restrainList.value = await proxy.$api.getRestrainList()
  }

  const getSkin = async () => {
    imageList.value = await proxy.$api.getSeerSkin({
      mon_id: current.value.id,
      name: current.value.def_name,
      image: current.value.image
    })
    TowerSwiper()
  }

  const direction = ref('')
  const towerStart = ref(0)
  // 初始化towerSwiper
  const TowerSwiper = () => {
    let list = imageList.value;
    for (let i = 0; i < list.length; i++) {
      list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
      list[i].mLeft = i - parseInt(list.length / 2)
    }
    imageList.value = list
  }

  // towerSwiper触摸开始
  const TowerStart = (e) => {
    towerStart.value = e.touches[0].pageX
  }

  // towerSwiper计算方向
  const TowerMove = (e) => {
    direction.value = e.touches[0].pageX - towerStart.value > 0 ? 'right' : 'left'
  }

  // towerSwiper计算滚动
  const TowerEnd = (e) => {
    let dir = direction.value;
    let list = imageList.value;
    if (dir === 'right') {
      let mLeft = list[0].mLeft;
      let zIndex = list[0].zIndex;
      for (let i = 1; i < imageList.value.length; i++) {
        imageList.value[i - 1].mLeft = imageList.value[i].mLeft
        imageList.value[i - 1].zIndex = imageList.value[i].zIndex
      }
      imageList.value[list.length - 1].mLeft = mLeft;
      imageList.value[list.length - 1].zIndex = zIndex;
    } else {
      let mLeft = list[list.length - 1].mLeft;
      let zIndex = list[list.length - 1].zIndex;
      for (let i = imageList.value.length - 1; i > 0; i--) {
        imageList.value[i].mLeft = imageList.value[i - 1].mLeft
        imageList.value[i].zIndex = imageList.value[i - 1].zIndex
      }
      imageList.value[0].mLeft = mLeft;
      imageList.value[0].zIndex = zIndex;
    }
    direction.value = ""
  }

  // 定位左边距
  const positionTagMl = (index) => {
    if (index > 0) {
      return 'tn-ml-sm'
    } else {
      return ''
    }
  }

  // 调整捕捉页面
  const gotoDetail = () => {
    if (current.value.capture) {
      const url = '/pages/jingling-capture/jingling-capture?data=' + JSON.stringify(current.value)
      uni.navigateTo({
        url
      })
      // const now = new Date().getTime()
      // if (getNow() && (now - getNow() > 48 * 60 * 60 * 1000)) {
      //   setAd(true)
      // }
      // const url = '/pages/jingling-capture/jingling-capture?data=' + JSON.stringify(current.value)
      // if (getAd() && getFreeNum() === 0 && uni.getStorageSync('openid') !== 'ov2zS5RoM8fqV_5womZDqF-0e7aI') {
      //   uni.navigateTo({
      //     url: '/pages/ad/ad?url=' + encodeURIComponent(JSON.stringify(url))
      //   })
      // } else {
      //   let freeNum = getFreeNum()
      //   if (freeNum > 0) {
      //     freeNum--
      //     setFreeNum(freeNum)
      //   }
      //   uni.navigateTo({
      //     url
      //   })
      // }
    }
  }

  // 跳转属性克制倍数
  const gotoRestrain = () => {
    const url = '/pagesA/restrain/restrain?id=' + current.value.type
    uni.navigateTo({
      url
    })
    // const now = new Date().getTime()
    // if (getNow() && (now - getNow() > 48 * 60 * 60 * 1000)) {
    //   setAd(true)
    // }
    // const url = '/pagesA/restrain/restrain?id=' + current.value.type
    // if (getAd() && getFreeNum() === 0 && uni.getStorageSync('openid') !== 'ov2zS5RoM8fqV_5womZDqF-0e7aI') {
    //   uni.navigateTo({
    //     url: '/pages/ad/ad?url=' + encodeURIComponent(JSON.stringify(url))
    //   })
    // } else {
    //   let freeNum = getFreeNum()
    //   if (freeNum > 0) {
    //     freeNum--
    //     setFreeNum(freeNum)
    //   }
    //   uni.navigateTo({
    //     url
    //   })
    // }
  }

  // 预览图片
  const previewImage = () => {
    const urls = imageList.value.map(item => item.image)
    urls.push(current.value.fight_img, current.value.head_img)
    uni.previewImage({
      urls
    })
  }

  // 收藏
  const changeCollect = async () => {
    if (loading.value) return
    if (uni.getStorageSync('openid')) {
      try {
        loading.value = true
        await proxy.$api.saveCollect({
          open_id: uni.getStorageSync('openid'),
          type: 'monster',
          biz_id: current.value.id,
          action_type: current.value.collect_flag ? 'remove' : 'add',
          collect_ids: current.value.id
        })
        const title = current.value.collect_flag ? `${current.value.def_name}被移除了收藏o(╥﹏╥)o` : `${current.value.def_name}被加入了收藏(*^▽^*)`
        uni.showToast({
          title,
          icon: 'none',
          duration: 2500
        })
        current.value.collect_flag = !current.value.collect_flag
        uni.$emit('changeCollectFlag', current.value)
        loading.value = false
      } catch (e) {
        loading.value = false
      }
    }
  }
</script>

<style scoped lang="less">
  /* 顶部背景图 start */
  .top-backgroup {
    height: 450rpx;
    z-index: -1;

    .backgroud-image {
      width: 100%;
      height: 667rpx;
      // z-index: -1;
    }
  }

  .about-shadow {
    border-radius: 15rpx;
    box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.07);
  }

  .about {

    &__wrap {
      position: relative;
      z-index: 1;
      margin: -270rpx 0 20rpx;
    }
  }

  /* 页面 end*/

  /* 用户信息 start */
  .user-info {
    &__container {

    }

    &__avatar {
      width: 280rpx;
      height: 280rpx;
      border: 8rpx solid rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 80rpx 0 rgba(0, 0, 0, 0.15);
    }

    &__nick-name {
      margin-top: 26rpx;
      font-size: 38rpx;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
    }
  }

  /* 用户信息 end */

  .list-border-left + .list-border-left {
    border-left: 1px solid #eee;
  }

  .border {
    &-left {
      border-left: 1px solid #eee;
    }

    &-right {
      border-right: 1px solid #eee;
    }

    &-top {
      border-top: 1px solid #eee;
    }

    &-bottom {
      border-bottom: 1px solid #eee;
    }

    &-all {
      border: 1px solid #eee;
    }
  }

  .skill:nth-child(even) {
    background-color: #eee;
  }

  .tower-swiper .tower-item {
    margin-left: calc(var(--left) * 180upx - 150upx);
    z-index: var(--index);
  }

  .swiper-item-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3px 5px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    z-index: 10
  }

  .swiper-item-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3px 5px;
    z-index: 10;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
  }

  /* 大嘴鸟*/
  .dong {
    z-index: 9999;
    position: fixed;
    top: -40px;
    right: -80px;
    transform: scale(0.24);
    -webkit-transform: scale(0.24);
    -moz-transform: scale(0.24);

  }

  .monster {
    transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    /* IE 9 */
    -moz-transform: rotate(-50deg);
    /* Firefox */
    -webkit-transform: rotate(-50deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-50deg);
    /* Opera */
    display: flex;
    justify-content: center;
    position: relative;
    width: 170px;
    height: 400px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    background-color: #3C47D7;
    box-shadow: 20px 20px 60px #4650E5;
  }

  .monster__face {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 14%;
    width: 75%;
    height: 160px;
  }

  .monster__noses {
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 28%;
    height: auto;
    margin-bottom: 10px;
  }

  .monster__nose {
    width: 8px;
    height: 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
  }

  .monster__mouth {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 0%;
    overflow: hidden;
    border: 25px solid #FFC333;
    border-radius: 100px;
    background-color: #810332;
    animation: mouth 1.75s infinite;
    box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }

  .monster__mouth::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 80px;
    border-radius: 100px;
    background-color: #400018;
  }

  .monster__mouth::after {
    content: '';
    position: absolute;
    bottom: -80px;
    width: 160px;
    height: 80px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background-color: #DC1B50;
    animation: tongue 1.75s infinite;
  }

  .monster__top {
    position: absolute;
    top: -30px;
    width: 170px;
    height: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #ffffff;
    z-index: 100;
    animation: t 1.75s infinite;
  }

  .monster__bottom {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ffffff;
    z-index: 100;
    animation: b 1.75s infinite;
  }

  .avatar-eye {
    position: absolute;
    top: -10%;
    width: 65px;
    height: 65px;
    background: linear-gradient(105deg, white, #cb87f4);
    border-radius: 100%;
    box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
    margin: 3px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }


  .avatar-eye--green {
    background: linear-gradient(to bottom, #fdfdfd, #c3efea);
  }

  .avatar-eye--violet {
    background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
  }


  .eye--left {
    left: 10%;
  }

  .eye--right {
    left: 85%;
  }

  .eye--center {
    left: 45%;
    top: 10%;
  }

  .avatar-eye-pupil {
    position: absolute;
    width: 55%;
    height: 55%;
    left: 50%;
    top: 25%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    z-index: 100;
    border-radius: 100%;
  }


  .pupil--green {
    background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
  }

  .pupil--pink {
    background: linear-gradient(135deg, #f1a183, #8535cd);
  }


  .avatar-eye-pupil-blackThing {
    position: absolute;
    width: 55%;
    height: 55%;
    left: 50%;
    top: 25%;
    background: #2c2f32;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    border-radius: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }

  .avatar-eye-pupil-lightReflection {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 25%;
    top: 10%;
    background: #ebebeb;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    border-radius: 100%;
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
  }


  /**/
  @keyframes t {

    0%,
    10%,
    80%,
    100% {
      top: -30px;
    }

    20% {
      top: 0px;
    }

    30% {
      top: -20px;
    }

    40% {
      top: -0px;
    }

    50% {
      top: -25px;
    }

    70% {
      top: 0px;
    }
  }

  @keyframes b {

    0%,
    10%,
    80%,
    100% {
      bottom: -30px;
    }

    20% {
      bottom: 0px;
    }

    30% {
      bottom: -20px;
    }

    40% {
      bottom: -0px;
    }

    50% {
      bottom: -25px;
    }

    70% {
      bottom: 0px;
    }
  }

  @keyframes mouth {

    0%,
    10%,
    100% {
      width: 100%;
      height: 0%;
    }

    15% {
      width: 90%;
      height: 30%;
    }

    20% {
      width: 50%;
      height: 70%;
    }

    25% {
      width: 70%;
      height: 70%;
    }

    30% {
      width: 80%;
      height: 60%;
    }

    35% {
      width: 60%;
      height: 70%;
    }

    40% {
      width: 55%;
      height: 75%;
    }

    45% {
      width: 50%;
      height: 90%;
    }

    50% {
      width: 40%;
      height: 70%;
    }

    55% {
      width: 70%;
      height: 95%;
    }

    60% {
      width: 40%;
      height: 50%;
    }

    65% {
      width: 100%;
      height: 60%;
    }

    70% {
      width: 100%;
      height: 70%;
    }

    75% {
      width: 90%;
      height: 70%;
    }

    80% {
      width: 50%;
      height: 70%;
    }

    85% {
      width: 90%;
      height: 50%;
    }

    85% {
      width: 40%;
      height: 70%;
    }

    90% {
      width: 90%;
      height: 30%;
    }

    95% {
      width: 100%;
      height: 10%;
    }
  }

  @keyframes tongue {

    0%,
    20%,
    100% {
      bottom: -80px;
    }

    30%,
    90% {
      bottom: -40px;
    }

    40% {
      bottom: -45px;
    }

    50% {
      bottom: -50px;
    }

    70% {
      bottom: -80px;
    }

    90% {
      bottom: -40px;
    }
  }
</style>
